<%--
  Created by IntelliJ IDEA.
  User: 邱华英
  Date: 2022/9/20
  Time: 19:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户管理界面</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/readeradmin.css">
    <link rel="stylesheet" href="/css/booksearch.css">
    <link rel="stylesheet" href="/css/index.css">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <style type="text/css">
        .fengye{
            border: 1px solid;
            display: inline;
            padding: 8px 16px;
        }

        span{
            color: aliceblue;
        }
        table{

            width: 980px;
        }


        td{

            overflow: hidden;

        }

        #fff{
            float: left;
            margin-left: 50px;
            width:693px;
            height: 44px;
            border: 1px solid black;
            position: relative;
        }

        #sss {
            float: left;
            height: 41px;
            width: 100px;
            text-align: center;
        }

        #ttt {
            float: left;
            width: 510px;
            height: 41px;
            padding-left: 10px;
            line-height: 41px;
        }

        #iii {
            /* float: right; */
            position: absolute;
            top: 0;
            left: 611px;
            width: 80px;
            height: 41px;
            background-color: #2d241d;
            font-size: 16px;
            color: #fff;
        }
        .tupian img {
            float: right;
            width: 980px;
            height: 465px;
        }

        .minyan {
            float: left;
            width: 100%;
            height: 163px;
            margin-top: 12px;
            background-color: green;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            line-height: 163px;
            color: #fff;
            background: rgba(0, 0, 0, 0.7);
        }


        /*li{*/
        /*    border: 1px solid;*/
        /*    display: inline;*/
        /*    padding: 8px 16px;*/
        /*}*/
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            top:0;
            bottom: 0;
            left:0;
            right: 0;
            background: rgba(0,0,0,.5);
            z-index: 2;
        }
        .c2{
            background-color: white;
            position: fixed;
            width: 380px;
            height: 200px;
            top: 50%;
            left: 50%;
            z-index: 3;
            margin-top: -150px;
            margin-left: -200px;
            font-size: 15px;
        }
        #modal p {
            margin-left:80px;
        }
        #add,#update{
            text-align: center;
        }
        #updateTable{
            display: none;
        }
    </style>
</head>
<body>

<%
    String contextPath = request.getSession().getServletContext().getContextPath();
%>
<section class="shortcut">
    <div class="w">
        <div class="fl">
            <ul>
                <li>图书管理系统！&nbsp;</li>
                <li>
                    <a href="index.html">请登录</a> &nbsp;
                    <a href="#" class="style-red">用户管理界面</a>
                </li>
            </ul>
        </div>
        <div class="fr">
            <ul>
                <li class="arrow-icon">我的消息</li>
                <li>|</li>
                <li class="arrow-icon"> <a href="<%=contextPath%>/admin/">退出</a></li>
            </ul>
        </div>
    </div>
</section>
<!-- 头部模块 -->
<header class="header w">
    <!-- logo -->
    <div class="logo">
        <h1>
            <a href="index.html" title="图书管理系统">人类进步的阶梯</a>
        </h1>
    </div>



</header>
<nav class="nav">
    <div class="w">
        <div class="dropdown">
            <div class="dt"> <a href="aindex.html">首页</a> </div>
            <div class="dd">
                <ul>
                    <li><a href="<%=contextPath%>/admin/User/">用户管理</a> </li>
                    <li><a href="<%=contextPath%>/admin/book/">图书管理</a> </li>
                    <li><a href="<%=contextPath%>/admin/borrow/">图书借阅管理</a> </li>

                    <li><a href="<%=contextPath%>/admin/inform/all/">通知</a></li>
                    <li><a href="<%=contextPath%>/admin/adminPCenter/">个人中心</a> </li>

                </ul>
            </div>
        </div>
        <form  id="fff"   action="<%=contextPath%>/admin/User/select" method="post">
            <select id="sss"    name="select">
                <option value="zhanghao">账号</option>
                <option value="username">用户名</option>
            </select>
            <input  id="ttt"   type="text" name="text"/>
            <input id="iii"    type="submit" value="搜索"/><br><br>
        </form>
        <button class="tianjia" onclick="Show()">添加用户</button>
        <button id="resetMima">批量重置密码</button>
    </div>
</nav>

<%--<a href="<%=contextPath%>/admin/">退出</a><br><br>--%>

<%--<form action="<%=contextPath%>/admin/User/select" method="post">--%>
<%--    <select name="select">--%>
<%--        <option value="zhanghao">账号</option>--%>
<%--        <option value="username">用户名</option>--%>
<%--    </select>--%>
<%--    <input type="text" name="text"/>--%>
<%--    <input type="submit" value="搜索"/><br><br>--%>
<%--</form>--%>


<%--<button onclick="Show()">添加用户</button>--%>
<div class="w">
 <div class="main">
    <table  id="mainTable" align="center " border="1 " cellpadding="1px " cellspacing="2px " width="980px "  ;>
        <thead class="biaoge ">
        <tr>
            <th><input type="checkbox" id="CMreset"></th>
            <th>id</th>
            <th>用户名</th>
            <th>用户账号</th>
            <th>密码</th>
            <th>手机号</th>
            <th>邮箱</th>
            <th>操作1</th>
            <th>操作2</th>
            <th>操作3</th>
        </tr>
        </thead>
<%--<table id="userTable" name="userTable" border="1px">--%>
<%--    <tr>--%>
<%--        <th>id</th>--%>
<%--        <th>用户名</th>--%>
<%--        <th>用户账号</th>--%>
<%--        <th>密码</th>--%>
<%--        <th>手机号</th>--%>
<%--        <th>邮箱</th>--%>
<%--        <th>操作1</th>--%>
<%--        <th>操作2</th>--%>
<%--    </tr>--%>
    <c:if test="${not empty users}">
    <c:forEach items="${users}" var="user">
        <tr>
            <td><input type="checkbox" class="MReset" value="${user.zhanghao}"></td>
            <td>${user.id}</td>
            <td>${user.userName}</td>
            <td>${user.zhanghao}</td>
            <td>${user.password}</td>
            <td>${user.phone}</td>
            <td>${user.email}</td>
<%--            <td><a href="UserServlet?task=findzhanghao&zhanghao=${user.zhanghao}" class="update">修改</a></td>--%>
            <td class="update">修改</td>
            <td><a href="../delete/${user.zhanghao}">删除</a></td>
            <td class="reset">重置用户密码</td>

        </tr>
    </c:forEach>
    </c:if>
</table><br><br>

    <div>
        <li class="fengye"><a onclick="deleteYeshu()"><<</a></li>
        <li class="fengye">第<label name="yeshu" id="yeshu">${yeshu}</label>页</li>
        <li class="fengye"><a onclick="addYeshu()">>></a></li>
    </div>


<div id="shade" class="c1 hide">

</div>
<div id="modal" class="c2 hide">
    <form id="add">
        <h2 id="title" name="title">添加用户</h2>
        <label>用户账号:</label><input type="text" name="zhanghao" id="zhanghao"><br>
        <label>用户名：</label><input type="text" name="username" id="username"><br>
        <label>密码:</label><input type="password" name="password" id="password"><br>
        <label>手机：</label><input type="text" name="phone" id="phone"><br>
        <label>邮箱：</label><input type="text" name="email" id="email1"><br><br>

            <input type="button" value="确定" id="submit">
            <input type="button" value="取消" onclick="Hide()">
            <input type="reset" value="重置" >

    </form>

</div>

<div class="c2 updateTable" id="updateTable">
    <form id="update" method="post">
        <h2>修改用户信息</h2>
        <label>用户账号:</label><input type="text" name="zhanghao" readonly="true" class="zhanghao"><br>
        <label>用户名：</label><input type="text" name="username" class="username"><br>
        <label>密码:</label><input type="password" name="password" class="password"><br>
        <label>手机：</label><input type="text" name="phone" class="phone"><br>
        <label>邮箱：</label><input type="text" name="email" class="email"><br><br>
        <input id="submit1" type="button" value="确定修改"> <button onclick="Hide1()">取消</button>
        <%--    </form>--%>
    </form>
</div>

     </div>
 </div>
<div class="w ">
    <div class="minyan">

        好好建设图书馆，全心全意为读者服务！

    </div>
</div>
</body>

<script>
    $(function (){
        $("#submit").click(function (){
            var zhanghao = $("#zhanghao").val();
            var userName = $("#username").val();
            var password = $("#password").val();
            var phone = $("#phone").val();
            var email= $("#email1").val();

            if(zhanghao=="" || username=="" || password=="" || phone=="" || email==""){
                alert("用户信息填写不完整");
            }else{
                $.ajax({
                    type:"post",
                    url:"<%=contextPath%>/admin/User/add",
                    data:{
                        "zhanghao":zhanghao,
                        "userName":userName,
                        "password":password,
                        "phone":phone,
                        "email":email,
                    },
                    success:function (msg){
                        if(msg==true){
                            alert("添加成功！")
                        }else{
                            alert("添加失败")
                        }
                    }
                })
            }


        })
    })

    $(function (){
        $(".update").click(function (){
            $(".zhanghao").val(this.parentNode.children[3].innerHTML);
            $(".username").val(this.parentNode.children[2].innerHTML);
            $(".password").val(this.parentNode.children[4].innerHTML);
            $(".phone").val(this.parentNode.children[5].innerHTML);
            $(".email").val(this.parentNode.children[6].innerHTML);
            $("#shade").show();
            $("#updateTable").show();
        })
    })

    $(function (){
        $("#submit1").click(function (){
            var zhanghao = $(".zhanghao").val();
            var username = $(".username").val();
            var password = $(".password").val();
            var phone = $(".phone").val();
            var email= $(".email").val();

            if(zhanghao=="" || username=="" || password=="" || phone=="" || email==""){
                alert("用户信息填写不完整");
            }else{
                $.ajax({
                    type:"post",
                    url:"<%=contextPath%>/admin/User/update",
                    data:{
                        "zhanghao":zhanghao,
                        "userName":username,
                        "password":password,
                        "phone":phone,
                        "email":email,
                    },
                    success:function (msg){
                        if(msg==true){
                            alert("修改成功！")
                        }else if(msg==false){
                            alert("修改失败")
                        }
                    }
                })
            }


        })
    })



    $(function (){
        $(".reset").click(function (){
            var zhanghao = this.parentNode.children[3].innerHTML;
                $.ajax({
                    type:"post",
                    url:"<%=contextPath%>/admin/User/reset",
                    data:{
                        "zhanghao":zhanghao,
                    },
                    success:function (msg){
                        if(msg==true){
                            alert("重置成功！")
                        }else if(msg==false){
                            alert("重置失败")
                        }
                    }
                })


        })
    })

    $(function (){
        $("#resetMima").click(function (){
         var check = document.getElementsByClassName("MReset");
         var zhanghao = "";
         for(var i=0;i < check.length;i++) {
             if (check[i].checked) {
                 zhanghao+=check[i].value+",";
             }
         }
            $.ajax({
                type:"post",
                url:"<%=contextPath%>/admin/User/Mreset",
                data:{
                    "zhanghao":zhanghao,
                },
                success:function (msg){
                    if(msg==true){
                        alert("批量重置成功！")
                    }else if(msg==false){
                        alert("批量重置失败")
                    }
                }
            })

        })
    })

    $(function (){
        $("#CMreset").click(function (){
            var check = document.getElementsByClassName("MReset");
            var CMrest = document.getElementById("CMreset");
            if(CMrest.checked){
                for(var i=0;i < check.length;i++) {
                    check[i].checked=true;
                }
            }else{
                for(var i=0;i < check.length;i++) {
                    check[i].checked=false;
                }
            }

        })
    })



</script>


<script type="text/javascript">
    function addYeshu(){
        var yeshu1 = document.getElementById("yeshu");
        window.location.href="<%=contextPath%>/admin/User/search/add?yeshu="+yeshu1.innerText;
    }
    function deleteYeshu(){
        var yeshu1 = document.getElementById("yeshu");
        window.location.href="<%=contextPath%>/admin/User/search/delete?yeshu="+yeshu1.innerText;
    }
    function Show(){
        document.getElementById('shade').classList.remove('hide');
        document.getElementById('modal').classList.remove('hide');
    }
    function Hide(){
        document.getElementById('shade').classList.add('hide');
        document.getElementById('modal').classList.add('hide');
    }
    function Hide1(){
        document.getElementById('shade').classList.add('hide');
        document.getElementById('updateTable').classList.add('hide');
    }
</script>
</html>
